<template>
	<view class="home-container">
		<u-navbar class="navbar" :is-back="false" :background="background">
			<u-search margin="30rpx 20rpx" height="56" placeholder="请输入关键词" v-model="searchKeyword" @clear="clearSearch"
				@search="search" :action-text="null" />
		</u-navbar>
		<!-- 加载正常的数据 -->
		<template v-if="startRenderArticleList">
			<article-list :articleList="homeArticleList" :listViewHeight="this.$u.sys().windowHeight - 60"
				@loadMoreData="getMoreArticleList" @itemClick="articleItemClick" @likeClick="articleLikeClick">
				<template #head>
					<u-swiper :list="bannerList" name="imagePath" :title="true" height="300" border-radius="0" />
				</template>
				<template #footer>
					<u-loadmore margin-top="50" margin-bottom="80" :status="loadMoreStatus" icon-type="flower" />
				</template>
			</article-list>
		</template>
		<!-- 数据未加载完时，加载骨架图 -->
		<template v-else>
			<view class="skeleton-loading">
				<u-loading class="loading" mode="flower" size="60" />
			</view>
			<article-list-skeleton />
		</template>
	</view>
</template>

<script>
	let currentArticleIndex = 0;
	let articleListLoadEnd = false;
	export default {
		data() {
			return {
				// 查询关键词
				searchKeyword: "Android",
				// 滚动广告栏
				bannerList: [],
				// 文章列表
				homeArticleList: [],
				// 是否开始渲染文章列表
				startRenderArticleList: false,
				// 加载更多状态
				loadMoreStatus: "loadmore",
				// 顶部状态栏颜色
				background: {
					'background-color': '#239ff6'
				},
			}
		},
		onLoad() {
			uni.showToast({
				title: '加载中,请稍候...',
				icon: "loading",
			});

			this.getHomeData();
		},
		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 2000);
		},
		watch: {
			vuexUserInfo(newData) {
				console.log("home vuexUserInfo");
				this.getHomeData();
			}
		},
		methods: {
			articleItemClick(index, article) {
				getApp().globalData.selectArticle = article;
				uni.navigateTo({
					url: "/pages/web-view-page/web-view-page"
				})

			},
			articleLikeClick(index, isCollect) {
				let articleLike = this.homeArticleList[index];
				articleLike.collect = isCollect;
				this.$set(this.homeArticleList, index, articleLike);
			},
			// 清除搜索关键词
			clearSearch() {
				this.searchKeyword = "";
			},
			// 开始搜索
			search() {
				console.log("search");
			},
			async getHomeData() {
				// 获取轮播数据
				this.bannerList = await this.$u.api.getHomeBanner();

				// 获取主页文章数据
				Promise.all([this.$u.api.getTopArticle(), this.$u.api.getArticleList(currentArticleIndex)])
					.then(articleData => {

						// 获取置顶文章
						let topArticle = articleData[0]?.map(article => {
							article.isTop = true;
							return article;
						});

						// 获取第一页的文章内容
						let articleList = articleData[1]?.datas;
						// ?.map(article => {
						// 	article.isTop = false;
						// 	return article;
						// });

						uni.hideToast();
						this.homeArticleList = topArticle.concat(articleList);
						setTimeout(() => {
							this.startRenderArticleList = true;
						}, 1500);
					});

			},
			// 获取更多文章
			async getMoreArticleList() {
				if (articleListLoadEnd) {
					return;
				}
				this.loadMoreStatus = "loading";
				// 更新当前页索引
				++currentArticleIndex;
				console.log("Article Page--->" + currentArticleIndex)
				// 加载主页数据
				let articleData = await this.$u.api.getArticleList(currentArticleIndex);
				// 合并文章数据
				this.homeArticleList = this.homeArticleList.concat(articleData.datas);
				// 强制只加载5次
				if (articleData.curPage >= 5) {
					this.loadMoreStatus = "nomore";
					articleListLoadEnd = true;
				} else {
					this.loadMoreStatus = "loadmore";
				}
			},

		}
	}
</script>

<style lang="scss">
	.skeleton-loading {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 300rpx;
	}
</style>
